/* eslint-disable no-useless-concat */
import styles from "./index.module.scss";
import logo from "../../assets/logo.png";
import React from "react";
import { adminLogin } from "../../api/serve";
import { Button, Form, Input, message } from "antd";
import { useNavigate } from "react-router-dom";
import { connect } from "react-redux";
import PropTypes from "prop-types";
function Login(props) {
  const { dispatch, state } = props;
  const navigate = useNavigate();
  const onFinish = (values) => {
    adminLogin(values, (res) => {
      // 登录的时候判断后端返回的数据是否有token如果有的话就证明登录成功否则登录失败
      if (res.success && res.token) {
        message.success("登录成功");
        sessionStorage.setItem("token", res.token);
        dispatch({
          type: "setState",
          payload: res.data[0].data[0],
        });
        // 默认跳转一开始是home页面但是为了确保每回跳转都到对应的页面应该设置成动态的
        let rolAuthor = JSON.parse(res.data[0].data[0].roleAuthority);
        let newArrRole = Object.keys(rolAuthor);
        let path = "";
        for (let i = 0; i < newArrRole.length; i++) {
          let item = newArrRole[i];
          if (rolAuthor[item].view.value) {
            path = item;
            break;
          }
        }
        navigate(path);
      } else {
        message.error("请检查你的账号和密码是否正确");
      }
    });
  };
  const onFinishFailed = (errorInfo) => {
    console.log("Failed:", errorInfo);
  };
  return (
    <main className={styles["login"]}>
      <section className={styles.login_container}>
        <div className={styles.login_l + " " + "login_con"}>
          <h3>LOGIN</h3>
          <Form
            name="basic"
            initialValues={{
              remember: true,
            }}
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
            autoComplete="off"
          >
            <Form.Item
              //   label="Username"
              name="username"
              rules={[
                {
                  required: true,
                  message: "Please input your username!",
                },
              ]}
            >
              <Input placeholder="username" />
            </Form.Item>

            <Form.Item
              //   label="Password"
              name="password"
              rules={[
                {
                  required: true,
                  message: "Please input your password!",
                },
                {
                  pattern: /^\w{4,8}$/,
                  message: "请输入正确格式的密码",
                },
              ]}
            >
              <Input placeholder="password" />
            </Form.Item>

            <Form.Item
              wrapperCol={{
                offset: 8,
                span: 16,
              }}
            >
              <Button type="primary" htmlType="submit">
                Submit
              </Button>
            </Form.Item>
          </Form>
        </div>
        <div className={styles.login_r}>
          <img src={logo} alt="" />
          <h1 className={styles.title}>后端管理</h1>
        </div>
      </section>
    </main>
  );
}
//设置函数的默认值
Login.defaultProps = {
  user: "",
  dispatch: () => "",
};
Login.propTypes = {
  dispatch: PropTypes.func,
  user: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
};
export default connect(
  (state) => state,
  (dispatch) => ({ dispatch })
)(Login);
